import { h, render } from 'vue'
import XtxConfirm from './confirm.vue'
type Props = {
  title?: string
  text: string
}
// 创建放置组件的容器
const div = document.createElement('div')
div.setAttribute('class', 'xtx-confirm-container')
document.body.appendChild(div)
// 导出方法
export default function Confirm({ title, text }: Props) {
  // 返回出一个promis对象，则在使用时可以.then和.catch方法来获取取消或者确认按钮，然后再写具体业务
  return new Promise((resolve, reject) => {
    const confirmCallback = () => {
      render(null, div)
      resolve(null)
    }
    const cancelCallback = () => {
      render(null, div)
      reject()
    }
    const vNode = h(XtxConfirm, {
      title,
      text,
      confirmCallback, //在传值的时候可以传这两个参数
      cancelCallback,
    })
    render(vNode, div)
  })
}
// 使用
/*Confirm({
  title: '温馨提示',
  text: '你确定要删除'
})
  .then(() => {
    console.log('点击了确定')
  })
  .catch(() => {
    console.log('点击了取消')
  })*/
